<template>
  <div class="marquee-box">
    <ul
      class="marquee-list"
      @mouseover="powerMouseoverThing"
      @mouseout="powerMouseoutThing"
    >
      <li
        class="marquee-item scroll-right"
        v-if="index <= 4"
        v-for="(item, index) in todayUsePowerList"
        :key="index"
      >
        <div class="marquee-box-item" :class="{ future: scroll }">
          <div class="marquee-box-first">TOP{{ item.index }}</div>
          <div class="marquee-box-second">{{ item.companyName }}</div>
          <div class="marquee-box-third">{{ item.value }}kw·h</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
// 将数组拆分成指定几个数组
const splitArray = (N, Q) => {
  let R = [],
    F;
  for (F = 0; F < Q.length; ) R.push(Q.slice(F, (F += N)));
  return R;
};

export default {
  computed: {
    ...mapState({
      todayUsePowerList: state => state.cityInfo.todayUsePowerList
    })
  },
  mounted() {
    // setInterval(() => {
    //   this.scroll = true;
    //   this.lists = []
    // }, 5000)
  },
  data() {
    return {
      scroll: false,
      currentIndex: 0,
      lists: this.todayUsePowerList
    };
  },
  methods: {
    showMarquee() {
      this.scroll = true;
      this.index++;
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          this.marqueeList = [
            1 + this.index,
            2 + this.index,
            3 + this.index,
            4 + this.index,
            5 + this.index
          ];
          resolve();
        }, 600);
      });
    },
    powerMouseoverThing() {},
    powerMouseoutThing() {}
  }
};
</script>
